import { useState, useEffect } from 'react';
import { show } from '../../../api';
import { useParams } from 'react-router-dom';
import { LikeOutlined, AimOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import './index.css';

const Detail = (props) => {
  const [hospital, setHospital] = useState({});
  const { hoscode } = useParams();

  useEffect(async () => {
    const { hospital } = await show(hoscode);
    setHospital(hospital);
  }, []);

  if (!hospital.hosname)
    return (
      <div className='m-l-30 m-r-30'>
        <Spin />
      </div>
    );

  return (
    <div className='m-l-30 m-r-30'>
      <div className='title'>
        <h2>{hospital.hosname}</h2>
        <p className='level'>
          <LikeOutlined className='level-icon' />
          {hospital.param.hostypeString}
        </p>
      </div>

      <div className='logo-route'>
        <img
          src={'data:image/jpeg;base64,' + hospital.logoData}
          alt={hospital.hosname}
          className='hospital-img'
        />
        <AimOutlined className='logo-route-icon' />
        <p>
          具体地址：{hospital.param.fullAddress}
          <br />
          规划路线：{hospital.route}
        </p>
      </div>

      <div className='intro'>
        <h3>医院介绍</h3>
        <div className='intro-text'>{hospital.intro}</div>
      </div>
    </div>
  );
};

export default Detail;
